<template>

<div class="grid-content bg-purple" />
	<el-menu :default-active="activeIndex" class="el-menu-demo" id="head" mode="horizontal" @select="handleSelect">
		<div style="padding-left: 70px">
			<img class="logoimg" src="../assets/1.png" />
		</div>

<el-menu-item index="1" @click="userindex"><h3>首页</h3></el-menu-item>

		<el-menu-item index="3" @click="BlindBox">
			发现
		</el-menu-item>
		<el-menu-item index="6" @click="SignIn">
			等你来答
		</el-menu-item>
    <div class="flex flex-wrap items-center">
    <el-dropdown>
		<el-input class="search" inlist="browsers">
      <el-icon class="el-icon--right"><arrow-down /></el-icon>
			<template #suffix>
				<a href="#" >
					<el-icon class="el-input__icon" >
						<Search />
					</el-icon>
				</a>
			</template>
      <datalist id="browsers">
        <el-option>123</el-option>
      </datalist>
		</el-input>
      <template #dropdown>
        <el-dropdown-menu style="max-height: 100px">
          <el-dropdown-item>Action 11111111111111111111111</el-dropdown-item>
          <el-dropdown-item>Action 11111111111111111111111111111</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
      </div>
		
		<span class="tiwen1">
		  <el-button type="text" @click="dialogVisible = true">提问</el-button>
		</span>

    <el-dialog v-model="dialogVisible" title="星光" width="30%" :before-close="handleClose">

        <el-input v-model="input" placeholder="请写下你的问题"  @focus="qwe"/>

        <el-input v-model="textarea2" v-show="isVisibles" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="详情"/>

        <el-upload action="#"  list-type="picture-card" :auto-upload="false" style="margin-top: 10px" id="ipu2">
          <template #default >
            <el-icon><Plus/>上传</el-icon>
          </template>
          <template #file="{ file }" >
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions" >
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
            </div>
          </template>
        </el-upload>

      <el-dialog v-model="dialogVisible1">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      <template #footer>

      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>

      </span>
      </template>
    </el-dialog>

		<div class="image" >
			<el-avatar shape="square" :size="40" :src="squareUrl" style="margin-right: 300px;margin-top: 10px"/>
		</div>

	</el-menu>
	<br />
	<br />
	<br />

	<div class="bottom">
		<!-- 侧边栏 -->
		<div class="sider">


		</div>
		<div class="content">

			<router-view />
		</div>

	</div>

	<div> </div>

</template>

<script>
import { ref } from 'vue'
import { reactive } from 'vue'
import { ElMessageBox } from 'element-plus'

	import {
		Search
	} from '@element-plus/icons-vue'

	import qs from 'qs'
	import storeUtil from '../utils/localstorage'


	export default {
		components: {
			Search: Search
			// HomeFilled: HomeFilled,
			// Ticket: Ticket,
			// Present: Present,
			// User: User,
			// Calendar:Calendar
		},
		name: "Index",
		data() {

			return {
        dialogVisible : ref(false),
        input : ref('') ,
        textarea : ref(''),
        isVisibles:false,

        tp: function(){
          document.getElementById("ipu").style.display="block";
        },
        dialogImageUrl : ref(''),
        dialogVisible1 : ref(false),
        disabled : ref(false),

        handleRemove : (file = this.uploadDisabled) => {
          console.log(file)
        },
        handlePictureCardPreview : (file = this.uploadDisabled) => {
          this.dialogImageUrl1.value = file.urldialogVisible.value = true
        },
        handleDownload : (file= this.uploadDisabled) => {
          console.log(file)
        },


				squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
				id: '',
				user: [],
        dialogTableVisible :ref(false),
        dialogFormVisible : ref(false),
        formLabelWidth : '140px',

        form : reactive({
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        }),
				// user: {
				// 	nickname: '',
				// 	id: '',
				// 	awardsImage: '',
				// 	awardsName: ''

				// }
				input4: '',
				iuser: {
					nickname: '',
					headPortrait: ''
				}
			}
		},
		mounted() {
			this.xinxi();

		},
		methods: {
      handleClose : (done) => {
        ElMessageBox.confirm('你确定放弃提问吗')

            .then(() => {
              done()
            })
            .catch(() => {
              // catch error
            })
      },
      qwe(){
        this.isVisibles=true;
        document.getElementById("ipu2").style.display="block";
      },
			xinxi() {

				// this.user.id = this.$route.query.id;
				console.log("this.$route.query.id=" + this.$route.query.id)

				this.$axios.get('/api/user/userid', {
						params: {
							id: this.$route.params.id
						}
					})
					.then(data => {
						let user = data.result.user;
						this.iuser = user;

					})
			},
			exit() {
				//跳转到登录页面
				this.$router.push({
					path: '/Loginxg'
				})
			},

			personalCenter() {
				let id = this.$route.params.id;
				console.log("id=" + id)
				//跳转到个人信息页面
				this.$router.push({
					path: '/personalCenter/'
				})

			},
			userindex() {

				let id = this.$route.params.id;
				console.log("id=" + id)
				this.$router.push({
			path:'/shou/'
				})
			},
			puzzleList() {

				let id = this.$route.params.id;
				console.log("id=" + id)
				//跳转到个人信息页面
				this.$router.push({
					path: '/puzzleList/'
				})

			},
			SignIn() {
				let id = this.$route.params.id;
				console.log("id=" + id)
				//跳转到签到页面
				this.$router.push({
					path: '/huida/'
				})

			},
			BlindBox() {
				let id = this.$route.params.id;
				console.log("id=" + id)
				//跳转到盲盒页面
				this.$router.push({
					path: '/fand/'
				})

			}

		}
	}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
#ipu{
  display: none;
  margin-top: 10px;
}
#ipu2{
  display: none;
  margin-top: 10px;
}
	.el-input__icon {

		width: 36px;
		height: 40px;
		margin-bottom: 6px;

	}
.tiwen{
	
	height: 20px;
}	
.tiwen1{
	margin-top: 10px;padding-left: 16px;
}
	.search {
		width: 373px;

		margin-top: 10px;

	}


	.logoimg {

		width: 132px;

	}

	#head {


		top: 0px;

	}

	li {
		float: left;

		list-style: none;
	}

	.image {


		margin-left: 572px;

	}

	.login-container {
		border: silver solid 2px;
		border-radius: 5px;
		width: 220px;
		height: 220px;
	}

	.houjiang {
		display: flex;
		justify-content: center;
		flex-direction: row-reverse;
	}

	#oneGrid {
		margin-right: 68px;

	}

	#threeGrid {
		margin-left: 68px;
	}

	.el-menu-demo {
		position: fixed;
		z-index: 3;
	}
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-button--text {
    margin-right: 15px;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  .el-textarea{
    margin-top: 20px;
  }
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
